// 导入 react
import React from "react";
// 导入 axios 包 发送 ajax 请求
// import axios from "axios";
// import {API} from '../../utils'

import { Carousel, Grid, Flex, WingBlank } from "antd-mobile";

import { getCurrentCity, API, BASE_URL } from "../../utils";

import SearchHeader from "../../components/SearchHeader";

// 导入图片
import Nav1 from "../../assets/images/nav-1.png";
import Nav2 from "../../assets/images/nav-2.png";
import Nav3 from "../../assets/images/nav-3.png";
import Nav4 from "../../assets/images/nav-4.png";
// 导入样式文件
import "./index.scss";

// 导航菜单数据
const menus = [
  { icon: Nav1, text: "整组", path: "/home/list" },
  { icon: Nav2, text: "合租", path: "home/list" },
  { icon: Nav3, text: "地图找房", path: "/map" },
  { icon: Nav4, text: "去出租", path: "rent/add" }
];

// navigator.geolocation.getCurrentPosition(position => {
//   console.log(position);
// },error=>{
//   console.log('获取位置失败：'+ error);
// })

class Index extends React.Component {
  state = {
    data: [],
    imgHeight: 212,
    isSwiperLoaded: true,
    tenement: [],
    // 资讯
    message: [],
    // 城市名称
    cityName: "上海"
  };

  async componentDidMount() {
    //  轮播图
    this.getSlide();
    //  租房小组
    this.getTenement();
    // 最新资讯
    this.getMessage();

    // 更具 IP 获取当前坐标
    const IPCity = await getCurrentCity();
    // console.log(IPCity);
    this.setState({
      cityName: IPCity.label
    });
  }

  //  轮播图数据
  async getSlide() {
    const { data } = await API.get("/home/swiper");
    // console.log(data);
    this.setState({
      data: data.body,
      isSwiperLoaded: false
    });
  }

  // 租房小组数据
  async getTenement() {
    const { data } = await API.get(
      "/home/groups?area=AREA%7C88cff55c-aaa4-e2e0"
    );
    // console.log(data);
    this.setState({
      tenement: data.body
    });
  }

  // 最新资讯
  async getMessage() {
    const { data } = await API.get("/home/news?area=AREA%7C88cff55c-aaa4-e2e0");
    // console.log(data);
    this.setState({
      message: data.body
    });
  }

  // 最新资讯
  renderMessage() {
    return this.state.message.map(itme => (
      <div className="content" key={itme.id}>
        <div className="mes-content" justify="between">
          <div className="fl-l">
            <img src={`${BASE_URL}${itme.imgSrc}`} alt="" />
          </div>
          <Flex className="mes-title" direction="column" justify="between">
            <h3>{itme.title}</h3>
            <Flex className="info" justify="between">
              <span>{itme.date}</span>
              <span>{itme.from}</span>
            </Flex>
          </Flex>
        </div>
      </div>
    ));
  }

  render() {
    return (
      <div className="index">
        {/* 頂部搜索 */}

        <SearchHeader cityName={this.state.cityName}></SearchHeader>

        {/* 轮播图 */}
        <div className="swiper" style={{ height: this.state.imgHeight }}>
          {this.state.isSwiperLoaded || (
            <Carousel autoplay={true} infinite>
              {this.state.data.map(itme => (
                <a
                  key={itme.id}
                  href="http://www.alipay.com"
                  style={{
                    display: "inline-block",
                    width: "100%",
                    height: this.state.imgHeight
                  }}
                >
                  <img
                    src={`${BASE_URL}${itme.imgSrc}`}
                    alt={itme.alt}
                    style={{ width: "100%", verticalAlign: "top" }}
                    onLoad={() => {
                      // fire window resize event to change height
                      window.dispatchEvent(new Event("resize"));
                      this.setState({ imgHeight: "auto" });
                    }}
                  />
                </a>
              ))}
            </Carousel>
          )}
        </div>
        {/* 导航菜单 九宫格 */}
        <div>
          <Grid
            data={menus}
            activeStyle={false}
            hasLine={false}
            onClick={itme => this.props.history.push(itme.path)}
            itemStyle={{padding:'10px 0'}}
          />
        </div>
        {/* 租房小组 */}
        <div className="groups">
          <Flex className="groups-title" justify="between">
            <h3>租房小组</h3>
            <span>更多</span>
          </Flex>
          <Grid
            data={this.state.tenement}
            columnNum={2}
            square={false}
            activeStyle
            hasLine={false}
            renderItem={item => (
              <Flex className="grid-item" justify="between">
                <div className="desc">
                  <h3>{item.title}</h3>
                  <p>{item.desc}</p>
                </div>
                <img src={`${BASE_URL}${item.imgSrc}`} alt="" />
              </Flex>
            )}
          />
        </div>

        {/* 最新资讯 */}
        <div className="message">
          <h3>最新资讯</h3>
          <WingBlank size="md">{this.renderMessage()}</WingBlank>
        </div>
      </div>
    );
  }
}

export default Index;
